<template>
  <div class="prompt-box">
    <template v-if="showDialog === 'showLogin'">
      <div class="prompt-text">
        用户身份失效，请重新登录！
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        重新登录
      </div>
    </template>
    <template v-if="showDialog === 'showTryAgain'">
      <div class="prompt-text">
        抱歉，视频获取失败～
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        点我重试
      </div>
    </template>
    <template v-if="showDialog === 'showPlayAgain'">
      <div class="prompt-text">
        您已经观看完最后一节视频，是否重新播放？
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        重新播放
      </div>
    </template>
    <!-- <template v-if="showDialog === 'showApply'">
      <div class="prompt-text">
        {{ '您已免费试听'+auditionTime+'分钟，完整观看请' }}
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        注册
      </div>
    </template>
    <template v-if="showDialog === 'showApplyTip'">
      <div class="prompt-text">
        您还没有报名本课程，完整观看请
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        报名学习
      </div>
    </template>
    <template v-if="showDialog === 'showEnroll'">
      <div class="prompt-text">
        您已试听过本课程，完整观看请
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        报名
      </div>
    </template> -->
    <!-- <template v-if="showDialog === 'showExpired'">
      <div class="prompt-text no-btn">
        您的学员账号已过期，请联系机构老师！
      </div>
    </template> -->
    <template v-if="showDialog === 'goRegister'">
      <div class="prompt-text">
        {{ '您已免费看完视频，学习更多课程请' }}
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        注册
      </div>
    </template>
    <template v-if="showDialog === 'goPaper'">
      <div class="prompt-text">
        您已看完第一节视频，继续学习请
      </div>
      <div
        class="btn-text"
        @click="onClick"
      >
        去做题
      </div>
    </template>
    <template v-if="showDialog === 'showNoCourse'">
      <div class="prompt-text no-btn">
        暂时没有上传视频~
      </div>
    </template>
    <template v-if="showDialog === 'showNoChapter'">
      <div class="prompt-text no-btn">
        暂时没有上传视频~
      </div>
    </template>
    <template v-if="showDialog === 'showVideoNoMaintained'">
      <div class="prompt-text no-btn">
        视频尚未维护~
      </div>
    </template>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    showDialog: {
      type: String,
      default: '',
    },
    auditionTime: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    onClick () {
      this.$emit('selectAction')
    },
  },
})
</script>
<style lang="scss" scoped>
.prompt-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 127px 0;
  text-align: center;
  background-color: #000;
}
.prompt-text {
  font-size: 28px;
  color: #fff;
  margin-bottom: 40px;
}
.no-btn {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-text {
  width: 266px;
  height: 70px;
  color: #fff;
  margin: auto;
  font-size: 32px;
  line-height: 71px;
  border-radius: 3px;
  background-color: $primary-web;
  @include active;
}
</style>
